<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 实现页面的基本布局 -->
      <el-card class="tree-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="first">
            <tree-tools
              :tree-node="company"
              :is-root="true"
              @addDepts="addDepts"
            />
            <!-- 分割线 -->
            <el-divider />
            <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
            <el-tree :data="departs" :props="defaultProps" default-expand-all>
              <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
              <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
              <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->

              <tree-tools
                slot-scope="obj"
                :tree-node="obj.data"
                @delDepts="getDepartmentsAPI()"
                @addDepts="addDepts"
                @editDepts="editDepts"
              />
            </el-tree>
          </el-tab-pane>
        </el-tabs>
        <!-- 用了一个行列布局 -->
        <!-- 缺少treeNode -->
      </el-card>
    </div>

    <add-dept ref="add" :node="Node" @addsuc="getDepartmentsAPI()" />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils/index'
import { getDepartmentsAPI } from '@/api/index'
import AddDept from './components/add-dept' // 引入新增部门组件
export default {
  components: {
    treeTools,
    AddDept
  },
  data() {
    return {
      activeName: 'first',
      Node: {},
      showDialog: false, // 显示窗体,
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      loading: false // 用来控制进度弹层的显示和隐藏
    }
  },

  async created() {
    this.getDepartmentsAPI()
  },
  methods: {
    addDepts(Node) {
      this.Node = Node
      this.$refs.add.showDialog = true
      // console.log(this.$refs.add)
    },
    async getDepartmentsAPI() {
      this.loading = true
      const res = await getDepartmentsAPI()
      this.company = { name: res.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(res.depts, '')
      // console.log(res)
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    editDepts(Node) {
      this.Node = Node
      this.$refs.add.showDialog = true
      this.$refs.add.getDepartDetailAPI(Node.id)
    }
  }
}
</script>

<style>
.el-divider--horizontal {
  margin: 0px;
}
</style>
